<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #small {
            width: 200px;
            height: 200px;
            position: relative;
            left: 100px;
            top: 100px;
            float: left;
        }

        #small img {
            width: 100%;
            height: 100%;
        }

        #small #mark {
            width: 60px;
            height: 60px;
            background: rgba(238, 235, 235, 0.7);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        #big {
            width: 120px;
            height: 120px;
            position: relative;
            float: left;
            left: 300px;
            top: 100px;
            border: 1px black solid;
            overflow: hidden;
            display: none;
        }

        #big img {
            width: 400px;
            height: 400px;
            top: 0;
            left: 0;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var osmall = document.getElementById('small');
            var obig = document.getElementById('big');
            var omark = document.getElementById('mark');
            var oimg = obig.getElementsByTagName('img')[0];
            osmall.onmouseover = function () {
                omark.style.display = 'block';
                obig.style.display = 'block';
            }
            osmall.onmouseout = function () {
                omark.style.display = 'none';
                obig.style.display = 'none';
            }
            osmall.onmousemove = function (ev) {
                var e = ev || window.event;
                var l = e.clientX - osmall.offsetLeft - 30;
                var t = e.clientY - osmall.offsetTop - 30;
                if (l <= 0) {
                    l = 0;
                }
                if (l >= 140) {
                    l = 140;
                }
                if (t <= 0) {
                    t = 0;
                }
                if (t >= 140) {
                    t = 140;
                }
                omark.style.left = l + 'px';
                omark.style.top = t + 'px';
                //右边图片移动的距离
                oimg.style.left = l * -2 + 'px';
                oimg.style.top = t * -2 + 'px';
            }
        }
    </script>
</head>

<body>
    <div id="small">
        <img src="img/img1.jpg" alt="">
        <div id="mark"></div>
    </div>

    <div id="big">
        <img src="img/img1.jpg" alt="">
    </div>
</body>

</html>